<template>
  <view class="flex flex-col items-center gap-y-8">
    <!-- 上传按钮/图片区块 -->
    <view>
      <template v-if="imageUrl">
        <image
          :src="imageUrl"
          mode="aspectFill"
          class="w-[240rpx] h-[240rpx] rounded-2xl shadow-md border border-[#f5f5f5] object-cover"
        />
        <nut-button
          type="primary"
          class="mt-[24rpx] w-[200rpx] rounded-2xl text-[28rpx] bg-[#165DFF]"
          @click="removeImage"
        >重新上传</nut-button>
      </template>
      <template v-else>
        <nut-button
          type="primary"
          class="w-[240rpx] h-[240rpx] rounded-2xl text-[28rpx] flex items-center justify-center bg-[#165DFF]"
          @click="chooseImage"
        >上传图片</nut-button>
      </template>
    </view>
  </view>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import Taro from '@tarojs/taro'
import { showToast } from '@tarojs/taro'
import {getFullPath} from '@/store/user'

/**
 * 单张图片上传并回显组件
 * @description 适用于 Taro + NutUI + Vue3 项目，严格使用 UnoCSS 原子类，上传接口为 /file/upload。
 * @performance 仅在用户操作时触发上传，避免无效请求。图片回显采用本地状态，减少不必要的渲染。
 */

// 上传后图片地址
const imageUrl = ref<string>('')

/**
 * 选择图片并上传
 */
const chooseImage = async () => {
  try {
    const res = await Taro.chooseImage({
      count: 1,
      sizeType: ['compressed'],
      sourceType: ['album', 'camera']
    })
    if (res.tempFilePaths && res.tempFilePaths.length > 0) {
      uploadFile(res.tempFilePaths[0])
    }
  } catch (err) {
    showToast({ title: '选择图片失败', icon: 'none' })
  }
}

/**
 * 上传文件到服务器
 * @param filePath 本地图片路径
 */
const uploadFile = async (filePath: string) => {
  try {
    Taro.showLoading({ title: '上传中...' })
    const uploadRes = await Taro.uploadFile({
      url: getFullPath("/file/upload"),
      filePath,
      name: 'file',
      header: {
        'Authorization': Taro.getStorageSync('token') ? `Bearer ${Taro.getStorageSync('token')}` : ''
      }
    })
    Taro.hideLoading()
    const data = JSON.parse(uploadRes.data)
    if (data.code === 0 && data.data?.url) {
      imageUrl.value = data.data.url
      showToast({ title: '上传成功', icon: 'success' })
    } else {
      showToast({ title: data.message || '上传失败', icon: 'none' })
    }
  } catch (err) {
    Taro.hideLoading()
    showToast({ title: '上传失败', icon: 'none' })
  }
}

/**
 * 移除已上传图片
 */
const removeImage = () => {
  imageUrl.value = ''
}
</script> 